<template>
	<div>
		<div clsas="flow-warp">
			<component :is="currentComponent" :processInstanceId="processInstanceId"></component>
			<div class="flow-btn">
				<el-card class="flow-card">
					<el-button type="primary" @click="openBox">审核</el-button>
				</el-card>
			</div>
		</div>
		<!-- 审核弹框 -->
		<examineBox ref="examineBoxRef" :flowData="flowData"></examineBox>
	</div>
</template>
<script setup lang="ts">
import examineBox from './examineBox.vue';
const route: any = useRoute();
const examineBoxRef = ref();
const currentComponent = ref(null);
const openBox = () => {
	examineBoxRef.value.dialogVisible = true;
};
const processInstanceId = ref();
const flowData = ref<any>({
	nodeId: '',
	taskId: '',
	processInstanceId: '',
});
onMounted(() => {
	flowData.value.nodeId = route.query.nodeId;
	flowData.value.taskId = route.query.taskId;
	flowData.value.processInstanceId = route.query.processInstanceId;
	processInstanceId.value = route.query.processInstanceId;
	const componentUrl = defineAsyncComponent(() => import(route.query.routeUrl));
	currentComponent.value = componentUrl;
});
</script>

<style scoped lang="scss">
.flow-btn {
	position: absolute;
	bottom: 0px;
	left: 15px;
	z-index: 66;
	width: calc(100% - 35px);
	.flow-card {
		display: flex;
		justify-content: flex-end;
	}
}
</style>
<style lang="scss">
.flow-warp {
	.hy-container {
		padding-bottom: 40px !important;
	}
}
</style>
